<script>
export default {
    name: "List"
}
</script>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { User_Group, User_Level, User_Manage, Marketing_Coupons_List, User_Tags, Customer_List, Distributors_Manage } from "@/api";
import UserTags from "@/components/UserTags.vue";

let userName = ref('')

let form = reactive({
    input: '',
    select: '',
    status: '全部',
    vip: '全部',
    tagsValue: '',
    label_id: '',
    is_promoter: '',
    country: '',
    isMember: '',
    pay_count: '',
    user_time_type: '',
    user_time: '',
    nickname: '',
    province: '',
    city: '',
    level: '',
    group_id: '',
    field_key: '',
    domestic: '',
})
// 搜索
let handleSearch = async () => {
    let { status, msg, data } = await User_Manage.list(form);
    if (status === 200) {
        tableData.value = data.list;
    } else {
        ElMessage.error(msg);
    }
}
// 重置
let search_ref = ref(null)
let handleReset = () => {
    search_ref.value.resetFields();
}

// 获取用户分组
let group_options = ref({})
let user_group = async () => {
    let { status, msg, data } = await User_Group.group_list({ page: 1, limit: 15 });
    if (status === 200) {
        group_options.value = data.list;
    } else {
        ElNotification({
            title: 'Warning',
            message: msg,
            type: 'warning',
        });
    }
}

// 获取用户等级
let level_options = ref({})
let user_level = async () => {
    let { status, msg, data } = await User_Level.level_list();
    if (status === 200) {
        level_options.value = data.list;
    } else {
        ElNotification.error(msg);
    }
}

// 添加用户
let drawer = ref(false)
let user_add = reactive({
    is_promoter: 0,
    real_name: '',
    card_id: '',
    birthday: '',
    mark: '',
    status: '',
    level: '',
    phone: '',
    addres: '',
    label_id: '',
    pwd: '',
    true_pwd: '',
    spread_open: 0,
    status: 1,
})
let handleAddUser = async () => {
    let { status, msg, data } = await User_Manage.save(user_add);
    if (status === 200) {
        ElMessage.success(msg);
        user_list();
        drawer.value = false;
    } else {
        ElMessage.error(msg);
    }
}
let formSize = ref('default')
let rules = reactive({

})
let tableData = ref([])
let parentBorder = ref(false)
let user_total = ref(0)
let user_list = async () => {
    let { status, msg, data } = await User_Manage.list();
    if (status === 200) {
        tableData.value = data.list;
        user_total.value = data.count;
        page_count.value = Math.ceil(user_total.value / 15);
    }
}

// 页码
let page_count = ref(0)
let currentPage = ref(1)
let pageSize = ref(0)
let getDateStr = (seconds, format = false) => {
    var date = new Date(seconds * 1000)
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    var currentTime = year + "-" + month + "-" + day + "  " + hour + ":" + minute + ":" + second;
    var birth = year + "-" + month + "-" + day;
    return format ? birth : currentTime;
}

// 折叠
let fold = ref(false)
let handleFold = () => {
    fold.value = !fold.value;
}

// 用户详情
let user_drawer = ref(false)
let user_detail = ref([])
let user_avatar = ref('')
let user_name = ref('')
let handleDetail = async (id) => {
    user_id.value = id;
    let { status, msg, data } = await User_Manage.user_detail(id);
    if (status === 200) {
        user_detail.value = data.headerList;
        user_avatar.value = data.ps_info.avatar;
        user_name.value = data.ps_info.real_name;
        baseInfo.value = data.ps_info;
        userInfo.value = data.userinfo;
    } else {
        ElNotification({
            title: 'Error',
            message: msg,
            type: 'error',
        })
    }
    user_drawer.value = !user_drawer.value;
}
// 关闭抽屉(用户详情)
let handleDrawerClose = () => {
    detailName.value = '';
    user_edit.value = true;
    user_save.value = false;
}

let detailName = ref('')
let baseInfo = ref({})
let userInfo = ref([])

// 消费记录
let user_id = ref(0)
let records = ref([])
let handleTabChange = async (tab) => {
    user_save.value = false;
    user_edit.value = true;
    let type = JSON.parse(JSON.stringify(tab.props.name));
    let { status, msg, data } = await User_Manage.user_info(user_id.value, { type });
    if (status === 200) {
        records.value = data.list;
    }
}

// 用户信息编辑
let user_edit = ref(true)
let tags_ref = ref(null)
let handleEdit = async () => {
    let { status, msg, data } = await User_Manage.edit_user(user_id.value);
    if (status === 200) {
        // userForm = data.userInfo;
        userForm.real_name = data.userInfo.real_name;
        userForm.uid = data.userInfo.uid;
        userForm.is_promoter = data.userInfo.is_promoter;
        userForm.card_id = data.userInfo.card_id;
        userForm.birthday = data.userInfo.birthday;
        userForm.mark = data.userInfo.mark;
        userForm.status = data.userInfo.status;
        userForm.level = data.userInfo.level;
        userForm.phone = data.userInfo.phone;
        userForm.addres = data.userInfo.addres;
        userForm.label_id = data.userInfo.label_id;
        userForm.spread_open = data.userInfo.spread_open;
        userForm.group_id = data.userInfo.group_id;
        // 回显标签
        data.userInfo.label_id.forEach(item => {
            userForm.tagsValue.push(item.label_name);
        })
        user_edit.value = false;
        user_save.value = true;
    }
}
let handleCloseDrop = () => {
    tags_ref.value.blur();
}
let user_save = ref(false)
let handleCancel = () => {
    user_save.value = false;
    user_edit.value = true;
}
let handleSave = async () => {
    let { status, msg } = await User_Manage.user_edit(user_id.value, userForm);
    if (status === 200) {
        handleDetail(user_id.value);
        ElMessage.success(msg);
        user_edit.value = true;
    } else {
        ElMessage.error(msg);
    }
}
let userForm = reactive({
    uid: '',
    is_promoter: 0,
    real_name: '',
    card_id: '',
    birthday: '',
    mark: '',
    status: '',
    level: '',
    phone: '',
    addres: '',
    label_id: '',
    pwd: '',
    true_pwd: '',
    spread_open: 0,
    status: 1,
    tagsValue: [],
})
let info_rules = reactive({
    account: [
        // 非空验证
        { required: true, message: '请输入用户名！', trigger: 'blur' },
        // 有效性验证
        { min: 3, max: 36, message: '长度在 3 到 36 个字符', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码！', trigger: 'blur' },
        { pattern: /^\d{3,}/, message: '密码至少3个数字', trigger: 'blur' }
    ],
})
let ref_form = ref(null)

// 分类切换
let handleCateChange = async (tab) => {
    let user_type = JSON.parse(JSON.stringify(tab.props.name));
    let { status, msg, data } = await User_Manage.list({ user_type });
    if (status === 200) {
        tableData.value = data.list;
        user_total.value = data.count;
        page_count.value = Math.ceil(user_total.value / 15);
    }
}

// 发送优惠券
let coupons = ref([])
let dialogCouponsVisible = ref(false)
let couponsForm = reactive({
    title: '',
})
let couponsData = ref([])
let handleSelectionTab = (selected) => {
    let user = JSON.parse(JSON.stringify(selected));
    coupons.value = user.map(item => item.uid);
}
let handleCoupons = async () => {
    if (!coupons.value.length) {
        ElMessage.error('请选择要发送优惠券的用户');
    } else {
        let { status, msg, data } = await Marketing_Coupons_List.send_list();
        if (status === 200) {
            couponsData.value = data.list;
        }
        dialogCouponsVisible.value = true;
    }
}
let handleSearchCoupons = async () => {
    let { status, data } = await Marketing_Coupons_List.send_list({ coupon_title: couponsForm.title });
    if (status === 200) {
        couponsData.value = data.list;
    }
}
let handleSendCoupons = (id) => {
    ElMessageBox.confirm(
        '确定要发送优惠券？',
        '发送优惠券',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let uid = coupons.value.toString();
            let { status, msg } = await Marketing_Coupons_List.send_coupons({ id, uid, all: 0 | 1, where: '' });
            if (status === 200) {
                ElMessage({
                    type: 'success',
                    message: msg,
                })
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}

// 用户标签
let handleTagsOpen = async () => {
    search_tags.value = true;
}
let search_tags = ref(false)
let handleSelectTags = (data) => {
    form.tagsValue = data;
    search_tags.value = false;
}
let handleTagsId = (data) => {
    form.label_id = data.toString();
}
// 隐藏下拉菜单
let selectTags = ref(null)
let closeDropMenu = () => {
    selectTags.value.blur();
}

// 设置分组
let user_group_visible = ref(false)
let userGroupData = ref([])
let userGroupTitle = ref('')
let userGroupName = ref('')
let handleGroup = async () => {
    if (!coupons.value.length) {
        ElMessage.error('请选择要分组的用户');
    } else {
        let { status, msg, data } = await User_Manage.set_group({ uids: coupons.value });
        if (status === 200) {
            userGroupName.value = data.rules[0].value;
            userGroupData.value = data.rules[0].options;
            userGroupTitle.value = data.title;
            user_group_visible.value = true;
        }
    }
}
let handleUserGroup = async () => {
    let group_id = userGroupName.value;
    let uids = parseInt(JSON.parse(JSON.stringify(coupons.value)));
    let { status, msg } = await User_Manage.save_set_group({ group_id, uids });
    if (status === 200) {
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 批量设置标签
let batch_tags = ref(false)
let handleTags = () => {
    if (!coupons.value.length) {
        ElMessage.error('请选择要设置标签的用户');
    } else {
        batch_tags.value = true;
    }
}
let handleBatchTags = async (label_id) => {
    let uids = JSON.parse(JSON.stringify(coupons.value)).toString();
    let { status, msg } = await User_Manage.save_set_label({ uids, label_id });
    if (status === 200) {
        batch_tags.value = false;
        ElMessage.success(msg);
        user_list();
    }
}

// 积分余额
let dialog_integral_visible = ref(false)
let money_status = ref(1)
let integration_status = ref(1)
let money = ref(0)
let integration = ref(0)
let id = ref(0)
let handleIntegral = (uid) => {
    id.value = uid;
    dialog_integral_visible.value = true;
}
let handleSubmit = async () => {
    let { status, msg } = await User_Manage.other_edit(id.value, { money_status: money_status.value, money: money.value, integration_status: integration_status.value, integration: integration.value });
    if (status === 200) {
        dialog_integral_visible.value = false;
    } else {
        ElMessage.error(msg);
    }
}

// 赠送会员
let dialog_membership_visible = ref(false)
let membership_form = reactive({
    day_diff: '',
    days: 0,
    time_diff: '',
})
let membership_id = ref(0)
let handleMembership = async (uid) => {
    let { status, msg, data } = await User_Manage.form_time(uid);
    if (status === 200) {
        membership_id.value = uid;
        membership_form.time_diff = data.rules[0].value;
        membership_form.day_diff = data.rules[1].value;
        membership_form.days = parseInt(data.rules[2].value);
        dialog_membership_visible.value = true;
    }
}
let handleMshipSubmit = async () => {
    let { status, msg } = await User_Manage.vip_give(membership_id.value, membership_form);
    if (status === 200) {
        ElMessage.success(msg);
        dialog_membership_visible.value = false;
    } else {
        ElMessage.error(msg);
    }
}

// 修改上级推广人
let dialog_promoter_visible = ref(false)
let squareUrl = ref('')
let handleSelectPromoter = async () => {
    let { status, msg, data } = await Customer_List.create_customer();
    if (status === 200) {
        mallUserData.value = data.list;
    }
    dialog_mall_visible.value = true;
}
let mallForm = reactive({
    data: '',
    nickname: '',
})
let mallUserData = ref([])
let dialog_mall_visible = ref(false)
let promoter = ref({})
let current_uid = ref(0)
let spread_uid = ref(0)
let handleEditPromoter = (uid) => {
    current_uid.value = uid;
    dialog_promoter_visible.value = true;
}
let handleCurrentChange = (user) => {
    promoter.value = JSON.parse(JSON.stringify(user));
    squareUrl.value = promoter.value?.headimgurl;
    spread_uid.value = promoter.value.uid;
    dialog_mall_visible.value = false;
}
let handleSubmitPromoter = async () => {
    let { status, msg } = await Distributors_Manage.edit_spread({ uid: current_uid.value, spread_uid: spread_uid.value });
    if (status === 200) {
        ElMessage.success(msg);
        squareUrl.value = '';
        dialog_promoter_visible.value = false;
    } else {
        ElMessage.error(msg);
    }
}
let handleChangeDate = async (tabData) => {
    let { status, msg, data } = await Customer_List.create_customer({data: tabData });
    if (status === 200) {
        mallUserData.value = data.list;
    }
}

// 设置标签（个人）
let tags_show = ref(false)
let user_tags_id = ref('')
let handleSetOneTags = (tags) => {
    user_tags_id.value = tags.uid;
    tags_show.value = true;
}
let handleOneTags = async (data) => {
    let { status, msg } = await User_Tags.set_label(user_tags_id.value, { label_ids: data });
    if (status === 200) {
        ElMessage.success(msg);
        user_list();
        tags_show.value = false;
    } else {
        ElMessage.error(msg);
    }
}

// 用户标签--添加
let add_tags = ref(false)
let addTags = ref(null)
let tagsValue = ref([])
let handleAddTagsId = (data) => {
    user_add.label_id = data;
}
let handleAddTags = (data) => {
    tagsValue.value = data;
    add_tags.value = false;
}
let closeTagsDrop = () => {
    addTags.value.blur();
}

// 用户标签--编辑
let edit_tags = ref(false)
let handleEditTags = (data) => {
    userForm.tagsValue = data;
    edit_tags.value = false;
}
let handleEditTagsId = (data) => {
    userForm.label_id = data;
}

onMounted(() => {
    user_group();
    user_level();
    user_list();
})
</script>

<template>
    <el-card class="box-card" shadow="never">
        <el-tabs v-model="userName" class="demo-tabs" @tab-click="handleCateChange">
            <div class="search-box" :class="fold ? '' : 'fold-box'">
                <div>
                    <el-form :model="form" label-width="120px" ref="search_ref">
                        <el-form-item label="用户搜索:" prop="nickname">
                            <el-input v-model="form.nickname" style="width: 300px;" placeholder="请输入用户"
                                class="input-with-select">
                                <template #prepend>
                                    <el-select v-model="form.field_key" placeholder="请选择" style="width: 115px">
                                        <el-option label="全部" value="" />
                                        <el-option label="UID" value="uid" />
                                        <el-option label="手机号" value="phone" />
                                        <el-option label="用户昵称" value="nickname" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>
                        <div v-show="fold">
                            <div style="width: 700px;display: flex;justify-content: space-between;">
                                <el-form-item label="用户标签" prop="tagsValue">
                                    <el-select @click="handleTagsOpen" v-model="form.tagsValue" multiple
                                        placeholder="请选择用户关联标签" style="width: 240px;" ref="selectTags"
                                        @focus="closeDropMenu">
                                    </el-select>
                                </el-form-item>
                                <UserTags :is_show="search_tags" @confirm="handleSelectTags" @tagId="handleTagsId"
                                    @close="search_tags = false"></UserTags>
                                <el-form-item label="下单次数:" prop="pay_count">
                                    <el-select v-model="form.pay_count" placeholder="请选择下单次数">
                                        <el-option label="全部" value="" />
                                        <el-option label="0次" :value="-1" />
                                        <el-option label="1次以上" :value="0" />
                                        <el-option label="2次以上" :value="1" />
                                        <el-option label="3次以上" :value="2" />
                                        <el-option label="4次以上" :value="3" />
                                        <el-option label="5次以上" :value="4" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 700px; display: flex;justify-content: space-between;">
                                <el-form-item label="用户分组:" prop="group_id">
                                    <el-select v-model="form.group_id" placeholder="请选择用户分组">
                                        <el-option label="全部" value="" />
                                        <el-option v-for="item in group_options" :key="item.id" :label="item.group_name"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="用户等级:" prop="level">
                                    <el-select v-model="form.level" placeholder="请选择用户等级">
                                        <el-option label="全部" value="" />
                                        <el-option v-for="item in level_options" :key="item.id" :label="item.name"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 700px;display: flex;justify-content: space-between;">
                                <el-form-item label="身份:" prop="is_promoter">
                                    <el-radio-group v-model="form.is_promoter">
                                        <el-radio-button label="">全部</el-radio-button>
                                        <el-radio-button :label="1">推广员</el-radio-button>
                                        <el-radio-button :label="0">普通用户</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="付费会员:" prop="isMember">
                                    <el-radio-group v-model="form.isMember">
                                        <el-radio-button label="">全部</el-radio-button>
                                        <el-radio-button :label="1">是</el-radio-button>
                                        <el-radio-button :label="0">否</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <el-form-item label="访问情况:" prop="user_time_type">
                                <el-select v-model="form.user_time_type" placeholder="请选择访问情况">
                                    <el-option label="全部" value="" />
                                    <el-option label="时间段未访问" value="visitno" />
                                    <el-option label="时间段访问过" value="visit" />
                                    <el-option label="首次访问" value="add_time" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="地区:" prop="country">
                                <el-select v-model="form.country" placeholder="请选择国家">
                                    <el-option label="中国" value="domestic" />
                                    <el-option label="外国" value="abroad" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="form-btn">
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Search />
                        </el-icon>
                        <span>搜索</span>
                    </el-button>
                    <el-button @click="handleReset">重置</el-button>
                    <a style="margin-left: 8px;color: blue;cursor: pointer;" @click="handleFold">
                        {{ fold ? '收起' : '展开' }}
                        <el-icon v-show="fold === true">
                            <ArrowUp />
                        </el-icon>
                        <el-icon v-show="fold === false">
                            <ArrowDown />
                        </el-icon>
                    </a>
                </div>
            </div>
            <div class="group-btn">
                <el-button type="primary" @click="drawer = true">添加用户</el-button>
                <el-button @click="handleCoupons">发送优惠券</el-button>
                <el-button @click="handleGroup">批量设置分组</el-button>
                <el-button @click="handleTags">批量设置标签</el-button>
                <el-button>
                    <el-icon>
                        <Upload />
                    </el-icon>
                    <span>导出</span>
                </el-button>
            </div>
            <!-- 批量设置标签 -->
            <UserTags :is_show="batch_tags" @tagId="handleBatchTags" @close="batch_tags = false"></UserTags>
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane label="微信公众号" name="wechat"></el-tab-pane>
            <el-tab-pane label="微信小程序" name="routine"></el-tab-pane>
            <el-tab-pane label="H5" name="h5"></el-tab-pane>
            <el-tab-pane label="PC" name="pc"></el-tab-pane>
            <el-tab-pane label="APP" name="app"></el-tab-pane>
            <!-- 用户列表 -->
            <el-table :data="tableData" :border="parentBorder" @selection-change="handleSelectionTab" class="user-table"
                :header-cell-style="{ background: '#f4f3f9', color: '#606266' }">
                <el-table-column type="selection" width="55" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="other-detail">
                            <div>
                                <p>首次访问: {{ getDateStr(props.row.add_time, false) }}</p>
                                <p>标签: {{ props.row.labels }}</p>
                                <p>备注: {{ props.row.mark }}</p>
                            </div>
                            <div>
                                <p>近次访问: {{ props.row.city }}</p>
                                <p>生日: {{ props.row.birthday }}</p>
                            </div>
                            <div>
                                <p>身份证号: {{ props.row.address }}</p>
                                <p>推荐人: {{ props.row.spread_uid_nickname }}</p>
                            </div>
                            <div>
                                <p>真实姓名: {{ props.row.real_name }}</p>
                                <p>地址: {{ props.row.addres }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="用户ID" prop="uid" />
                <el-table-column label="头像" prop="avatar">
                    <template #default="scope">
                        <el-image :src="scope.row.avatar" style="width:50px;" fit="cover" />
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="real_name" />
                <el-table-column label="付费会员" prop="isMember">
                    <template #default="scope">
                        <span>{{ scope.row.isMember ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户等级" prop="level" />
                <el-table-column label="分组" prop="group_id" />
                <el-table-column label="手机号" prop="phone" />
                <el-table-column label="用户类型" prop="user_type" />
                <el-table-column label="余额" prop="now_money" sortable />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <div style='display: flex;'>
                            <el-button link type="primary" size="small" @click="handleDetail(scope.row.uid)">详情</el-button>
                            <el-dropdown>
                                <el-button link type="primary">
                                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="handleIntegral(scope.row.uid)">积分余额</el-dropdown-item>
                                        <el-dropdown-item @click="handleMembership(scope.row.uid)">赠送会员</el-dropdown-item>
                                        <el-dropdown-item>设置分组</el-dropdown-item>
                                        <el-dropdown-item @click="handleSetOneTags(scope.row)">设置标签</el-dropdown-item>
                                        <el-dropdown-item
                                            @click="handleEditPromoter(scope.row.uid)">修改上级推广人</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码 -->
            <div class="page">
                <el-pagination background layout="total, prev, pager, next,jumper" :total="user_total" :page-size="15"
                    :page-count="page_count" v-model:current-page="currentPage" v-model:page-size="pageSize" />
            </div>
        </el-tabs>

        <!-- 用户标签 -->
        <UserTags :is_show="tags_show" @tagId="handleOneTags" @close="tags_show = false">
        </UserTags>

        <!-- 添加用户 -->
        <el-drawer v-model="drawer" :show-close="false" class="drawer" size="50%" :with-header="false">
            <div class="drawer-title">
                <b>用户信息填写</b>
            </div>
            <el-form ref="form_ref" :model="user_add" :rules="rules" label-width="120px" class="user-form" :size="formSize"
                status-icon>
                <el-form-item label="真实姓名：" prop="real_name">
                    <el-input v-model="user_add.real_name" placeholder="请输入真实姓名" />
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="user_add.phone" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="生日：" required>
                    <el-form-item prop="birthday">
                        <el-date-picker v-model="user_add.birthday" type="date" label="Pick a date" placeholder="请选择生日"
                            style="width: 100%" />
                    </el-form-item>
                </el-form-item>
                <el-form-item label="身份证号" prop="card_id">
                    <el-input v-model="user_add.card_id" placeholder="请输入身份证号" />
                </el-form-item>
                <el-form-item label="用户地址" prop="addres">
                    <el-input v-model="user_add.addres" placeholder="请输入用户地址" />
                </el-form-item>
                <el-form-item label="用户备注" prop="mark">
                    <el-input v-model="user_add.mark" placeholder="请输入用户备注" />
                </el-form-item>
                <el-form-item label="登录密码" prop="pwd">
                    <el-input v-model="user_add.pwd" type="password" placeholder="请输入登录密码（修改用户可不填写，不填写不修改原密码）" />
                </el-form-item>
                <el-form-item label="确认密码" prop="true_pwd">
                    <el-input v-model="user_add.true_pwd" type="password" placeholder="请输入确认密码（修改用户可不填写，不填写不修改原密码）" />
                </el-form-item>
                <el-form-item label="用户等级" prop="level">
                    <el-select v-model="user_add.level" placeholder="请选择">
                        <el-option label="全部" value="0" />
                        <el-option v-for="item in level_options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户分组:">
                    <el-select v-model="user_add.group_id" placeholder="请选择">
                        <el-option label="全部" value="0" />
                        <el-option v-for="item in group_options" :key="item.id" :label="item.group_name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户标签" prop="label_id">
                    <el-select @click="add_tags = true" v-model="tagsValue" multiple placeholder="请选择用户关联标签"
                        style="width: 240px;" ref="addTags" @focus="closeTagsDrop">
                    </el-select>
                </el-form-item>
                <UserTags :is_show="add_tags" @confirm="handleAddTags" @tagId="handleAddTagsId" @close="add_tags = false">
                </UserTags>
                <el-form-item label="推广资格" prop="spread_open">
                    <el-radio-group v-model="user_add.spread_open">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="推广权限" prop="is_promoter">
                    <el-radio-group v-model="user_add.is_promoter">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户状态" prop="status">
                    <el-radio-group v-model="user_add.status">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="form-bottom">
                    <el-form-item>
                        <el-button>取消</el-button>
                        <el-button type="primary" @click="handleAddUser">提交</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-drawer>

        <!--发送优惠券 -->
        <el-dialog v-model="dialogCouponsVisible" title="发送优惠券">
            <el-form :model="couponsForm" label-width="120px">
                <el-form-item label="优惠券名称：">
                    <el-input v-model="couponsForm.title">
                        <template #append>
                            <el-button icon="Search" type="primary" @click="handleSearchCoupons" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table :data="couponsData">
                <el-table-column property="coupon_title" label="优惠券名称" />
                <el-table-column property="coupon_price" label="优惠券面值" />
                <el-table-column property="use_min_price" label="优惠券最低消费" />
                <el-table-column property="coupon_time" label="优惠券有效期限" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handleSendCoupons(scope.row.id)">发送</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 用户详情 -->
        <el-drawer v-model="user_drawer" title="用户详情" direction="rtl" size="70%" @close="handleDrawerClose">
            <div class="detail-container">
                <div class="container-top">
                    <div class="user-avatar">
                        <el-avatar shape="square" :size="50" fit="cover" :src="user_avatar" />
                    </div>
                    <div class="user-info">
                        <p>{{ user_name }}</p>
                        <span v-for="user in user_detail">{{ user.title + ':' + user.value }}</span>
                    </div>
                    <div v-show="user_edit">
                        <el-button type="primary" @click="handleEdit">编辑</el-button>
                    </div>
                    <div v-show="user_save">
                        <el-button @click="handleCancel">取消</el-button>
                        <el-button type="primary" @click="handleSave">保存</el-button>
                    </div>
                </div>
                <div class="user-base-detail">
                    <el-tabs v-model="detailName" class="demo-tabs" @tab-click="handleTabChange">
                        <el-tab-pane label="用户信息" name="" v-if="user_edit">
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>基本信息</span>
                                </div>
                                <ul class="detail-content">
                                    <li>用户编号：{{ baseInfo.uid }}</li>
                                    <li>真实姓名：{{ baseInfo.real_name }}</li>
                                    <li>手机号码：{{ baseInfo.phone }}</li>
                                    <li>生日：{{ getDateStr(baseInfo.birthday, true) }}</li>
                                    <li>身份证号：{{ baseInfo.card_id || '-' }}</li>
                                    <li>用户地址：{{ baseInfo.addres || '-' }}</li>
                                </ul>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>密码</span>
                                </div>
                                <ul class="detail-content">
                                    <li>密码：********</li>
                                </ul>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>用户概况</span>
                                </div>
                                <ul class="detail-content">
                                    <li>推广资格：{{ baseInfo.is_promoter }}</li>
                                    <li>用户状态：{{ baseInfo.status }}</li>
                                    <li>用户等级：{{ baseInfo.level }}</li>
                                    <li>用户标签：{{ baseInfo.label_list }}</li>
                                    <li>用户分组：{{ baseInfo.group_name || '-' }}</li>
                                    <li>推广人：{{ baseInfo.spread_uid_nickname }}</li>
                                    <li>注册时间：{{ getDateStr(baseInfo.add_time, false) || '-' }}</li>
                                    <li>登录时间：{{ baseInfo.addres || '-' }}</li>
                                </ul>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>用户备注</span>
                                </div>
                                <ul class="detail-content">
                                    <li>备注：{{ baseInfo.mark || '-' }}</li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <!-- 编辑用户信息 -->
                        <el-tab-pane label="用户信息" name="" v-if="user_save">
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>基本信息</span>
                                </div>
                                <el-form ref="ref_form" :model="userForm" :rules="info_rules" label-width="120px"
                                    class="demo-ruleForm" :size="formSize" status-icon>
                                    <div style="width:800px;display:flex;justify-content:space-between">
                                        <el-form-item label="用户ID：" prop="uid">
                                            <el-input v-model="userForm.uid" disabled />
                                        </el-form-item>
                                        <el-form-item label="真实姓名：" prop="real_name">
                                            <el-input v-model="userForm.real_name" />
                                        </el-form-item>
                                    </div>
                                    <div style="width:800px;display:flex;justify-content:space-between">
                                        <el-form-item label="手机号码：" prop="phone">
                                            <el-input v-model="userForm.phone" />
                                        </el-form-item>
                                        <el-form-item label="生日:">
                                            <el-form-item prop="birthday" label-width="10px">
                                                <el-date-picker v-model="userForm.birthday" type="date" label="Pick a date"
                                                    placeholder="请选择生日" style="width: 196px" />
                                            </el-form-item>
                                        </el-form-item>
                                    </div>
                                    <div style="width:800px;display:flex;justify-content:space-between">
                                        <el-form-item label="身份证号：" prop="card_id">
                                            <el-input v-model="userForm.card_id" placeholder="请输入身份证号" />
                                        </el-form-item>
                                        <el-form-item label="用户地址：" prop="addres">
                                            <el-input v-model="userForm.addres" placeholder="请输入用户地址" />
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>密码</span>
                                </div>
                                <el-form ref="ref_form" :model="userForm" :rules="info_rules" label-width="120px"
                                    class="demo-ruleForm" :size="formSize" status-icon>
                                    <div style="width:800px;display:flex;justify-content:space-between">
                                        <el-form-item label="登录密码：" prop="pwd">
                                            <el-input type="password" v-model="userForm.pwd" style="width:350px;"
                                                placeholder="请输入登录密码（修改用户可不填写，不填写不修改原密码）" />
                                        </el-form-item>
                                        <el-form-item label="确认密码：" prop="true_pwd">
                                            <el-input v-model="userForm.true_pwd" type="password" style="width:350px;"
                                                placeholder="请输入确认密码（修改用户可不填写，不填写不修改原密码）" />
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>用户概况</span>
                                </div>
                                <el-form ref="ref_form" :model="userForm" :rules="info_rules" label-width="120px"
                                    class="demo-ruleForm" :size="formSize" status-icon>
                                    <el-form-item label="用户等级" prop="level">
                                        <el-select v-model="userForm.level" placeholder="请选择">
                                            <el-option label="全部" :value="0" />
                                            <el-option v-for="item in level_options" :label="item.name" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="用户分组:" prop="group_id">
                                        <el-select v-model="userForm.group_id" placeholder="请选择">
                                            <el-option label="全部" value="0" />
                                            <el-option v-for="item in group_options" :label="item.group_name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="用户标签" prop="label_id">
                                        <el-select @click="edit_tags = true" v-model="userForm.tagsValue" multiple
                                            placeholder="请选择用户关联标签" style="width: 240px;" ref="tags_ref"
                                            @focus="handleCloseDrop">
                                        </el-select>
                                    </el-form-item>
                                    <UserTags :is_show="edit_tags" @confirm="handleEditTags" @tagId="handleEditTagsId"
                                        @close="edit_tags = false">
                                    </UserTags>
                                    <el-form-item label="推广资格" prop="spread_open">
                                        <div>
                                            <el-radio-group v-model="userForm.spread_open">
                                                <el-radio :label="1">开启</el-radio>
                                                <el-radio :label="0">关闭</el-radio>
                                            </el-radio-group>
                                            <div class="tip">关闭用户的推广资格后，在任何分销模式下该用户都无分销权限</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="推广权限" prop="is_promoter">
                                        <div>
                                            <el-radio-group v-model="userForm.is_promoter">
                                                <el-radio :label="1">开启</el-radio>
                                                <el-radio :label="0">关闭</el-radio>
                                            </el-radio-group>
                                            <div class="tip">指定分销模式下，开启或关闭用户的推广权限</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="用户状态" prop="status">
                                        <el-radio-group v-model="userForm.status">
                                            <el-radio :label="1">开启</el-radio>
                                            <el-radio :label="0">锁定</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="first-detail">
                                <div class="detail-top">
                                    <span>用户备注</span>
                                </div>
                                <ul class="detail-content">
                                    <el-form-item label="用户备注：" prop="mark">
                                        <el-input v-model="userForm.mark" type="textarea" />
                                    </el-form-item>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="消费记录" name="order">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="date" label="订单ID" width="180" />
                                <el-table-column prop="name" label="收货人" width="180" />
                                <el-table-column prop="address" label="商品数量" />
                                <el-table-column prop="address" label="实付金额" />
                                <el-table-column prop="address" label="交易完成时间" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="积分明细" name="integral">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="title" label="来源/用途" width="180" />
                                <el-table-column prop="number" label="积分变化" width="180" />
                                <el-table-column prop="balance" label="变化后积分" />
                                <el-table-column prop="add_time" label="日期" />
                                <el-table-column prop="mark" label="备注" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="签到记录" name="sign">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="date" label="动作" width="180" />
                                <el-table-column prop="name" label="获得积分" width="180" />
                                <el-table-column prop="address" label="签到时间" />
                                <el-table-column prop="address" label="备注" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="持有优惠券" name="coupon">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="coupon_title" label="优惠券名称" width="180" />
                                <el-table-column prop="coupon_price" label="面值" width="180" />
                                <el-table-column prop="coupon_time" label="有效期（天）" />
                                <el-table-column prop="_add_time" label="兑换时间" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="余额变动" name="balance_change">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="title" label="动作" width="180" />
                                <el-table-column prop="balance" label="余额变动" width="180" />
                                <el-table-column prop="number" label="当前余额" />
                                <el-table-column prop="add_time" label="创建时间" />
                                <el-table-column prop="mark" label="备注" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="好友关系" name="spread">
                            <el-table :data="records" style="width: 100%">
                                <el-table-column prop="uid" label="ID" width="180" />
                                <el-table-column prop="nickname" label="昵称" width="180" />
                                <el-table-column prop="type" label="等级" />
                                <el-table-column prop="add_time" label="加入时间" />
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-drawer>

        <!-- 设置用户分组 -->
        <el-dialog v-model="user_group_visible" :title="userGroupTitle" width="40%">
            <span>用户分组：</span>
            <el-select v-model="userGroupName" placeholder="请选择用户分组">
                <el-option v-for="item in userGroupData" :label="item.label" :key="item.value" :value="item.value" />
            </el-select>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleUserGroup">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 积分余额 -->
        <el-dialog v-model="dialog_integral_visible" title="修改其他">
            <ul class="set-balance">
                <li>
                    <span>修改余额</span>
                    <el-radio-group v-model="money_status" class="ml-4">
                        <el-radio :label="1">增加</el-radio>
                        <el-radio :label="2">减少</el-radio>
                    </el-radio-group>
                </li>
                <li>
                    <span>余额</span>
                    <el-input-number v-model="money" class="mx-4" :min="0" :max="10" controls-position="right" />
                </li>
                <li>
                    <span>修改积分</span>
                    <el-radio-group v-model="integration_status" class="ml-4">
                        <el-radio :label="1">增加</el-radio>
                        <el-radio :label="2">减少</el-radio>
                    </el-radio-group>
                </li>
                <li>
                    <span>积分</span>
                    <el-input-number v-model="integration" class="mx-4" :min="0" :max="10" controls-position="right" />
                </li>
            </ul>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 赠送会员 -->
        <el-dialog v-model="dialog_membership_visible" title="赠送付费会员时长">
            <el-form :model="membership_form" label-width="120px">
                <el-form-item label="到期时间">
                    <el-input v-model="membership_form.time_diff" />
                </el-form-item>
                <el-form-item label="剩余天数">
                    <el-input v-model="membership_form.day_diff" />
                </el-form-item>
                <el-form-item label="增加时长(天)">
                    <el-input-number v-model="membership_form.days" class="mx-4" controls-position="right" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleMshipSubmit">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 修改上级推广人 -->
        <el-dialog v-model="dialog_promoter_visible" title="修改推广人">
            <div style="width:150px;display: flex;justify-content: space-between;align-items: center;">
                <div>选择推广人：</div>
                <el-avatar v-if="squareUrl" shape="square" :size="50" :src="squareUrl" style="border:1px solid #eee" />
                <div v-else class="promoter" @click="handleSelectPromoter">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleSubmitPromoter">提交</el-button>
                    <el-button @click="dialog_promoter_visible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 请选择商品用户 -->
        <el-dialog v-model="dialog_mall_visible" title="请选择商品用户">
            <el-form :model="mallForm" label-width="120px">
                <el-form-item label="搜索日期：">
                    <el-radio-group v-model="mallForm.data" @change="handleChangeDate">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button label="today">今天</el-radio-button>
                        <el-radio-button label="yesterday">昨天</el-radio-button>
                        <el-radio-button label="lately7">最近7天</el-radio-button>
                        <el-radio-button label="lately30">最近30天</el-radio-button>
                        <el-radio-button label="month">本月</el-radio-button>
                        <el-radio-button label="year">本年</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户名称：">
                    <el-input v-model="mallForm.nickname" placeholder="请输入用户名称" style="width:300px;">
                        <template #append>
                            <el-button icon="Search" type="primary" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table :data="mallUserData" @current-change="handleCurrentChange">
                <el-table-column label="选择" width="50">
                    <template #default>
                        <div style="width:15px;height:15px;border-radius:50%;border:1px solid #ccc;"></div>
                    </template>
                </el-table-column>
                <el-table-column property="uid" label="ID" width="120" />
                <el-table-column property="nickname" label="微信用户名称" width="120" />
                <el-table-column label="客服头像" prop="avatar">
                    <template #default="scope">
                        <el-image :src="scope.row.headimgurl" style="width:50px;" fit="cover" />
                    </template>
                </el-table-column>
                <el-table-column property="user_type" label="用户类型" />
                <el-table-column label="性别">
                    <template #default="scope">
                        <span>{{ scope.row.sex || '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地区">
                    <template #default="scope">
                        <span>{{ scope.row.city || '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否关注公众号" property="is_del">
                    <template #default="scope">
                        <span>{{ scope.row.is_del ? '已关注' : '未关注' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary">提交</el-button>
                    <el-button @click="dialog_mall_visible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>


<style lang="less" scoped>
.box-card {
    .demo-tabs {
        .search-box {
            border-bottom: 1px dashed #ccc;

            .el-form {
                margin-top: 15px;
                margin-right: 20px;
            }

            .form-btn {
                width: 650px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding-bottom: 15px;

                a {
                    display: inline-block;
                }
            }
        }

        .fold-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .form-btn {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 0;

                a {
                    display: inline-block;
                }
            }
        }

        .group-btn {
            margin-top: 15px;
        }

        .user-table {
            .el-dropdown {
                .el-button {
                    font-size: 10px;
                    margin-left: 15px;
                    outline: none;
                    vertical-align: middle;
                }

                .el-dropdown-link {
                    cursor: pointer;
                    color: var(--el-color-primary);
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    .set-balance {
        list-style: none;

        li {
            padding: 10px;

            span {
                display: inline-block;
                margin-right: 15px;
            }
        }
    }

    .drawer {

        .drawer-title {
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

        .user-form {
            margin-top: 10px;

            .form-bottom {
                display: flex;
                justify-content: flex-end;
                padding-top: 10px;
                border-top: 1px solid #ccc;
            }
        }

    }

    .el-table {
        margin-top: 15px;

        .other-detail {
            background-color: #f8f8f9;
            padding: 10px 30px;
            display: flex;
            justify-content: space-between;
        }
    }

    .page {
        display: flex;
        justify-content: flex-end;
        padding-top: 15px;
    }

    .detail-container {
        .container-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #ccc;

            .user-avatar {
                width: 60px;
            }

            .user-info {
                width: 80%;
                font-size: 12px;

                span {
                    display: inline-block;
                    width: 33%;
                }

            }
        }

        .user-base-detail {
            margin-top: 20px;

            .demo-tabs {
                .first-detail {
                    margin-top: 15px;
                    border-bottom: 1px dashed #ccc;

                    .detail-top {
                        padding-left: 20px;
                        border-left: 3px solid #1890ff;
                    }

                    .detail-content {
                        list-style: none;

                        li {
                            font-size: 12px;
                            display: inline-block;
                            width: 33%;
                            margin-bottom: 15px;
                        }
                    }
                }
            }
        }
    }
}

.tip {
    font-size: 14px;
    color: #7b7979;
}

.promoter {
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
}
</style>

